<template>
  <div ref="dgtools" class="filter-container">
    <el-form 
      :model="fm.ps" 
      :rules="rules" 
      :inline="true" 
      ref="searchRef">
      <el-form-item>
        <el-date-picker
          clearable type="date"
          v-model="fm.ps.time"
          placeholder="查询日期"
          value-format="yyyy-MM-dd"
          style="width: 130px" 
        />
      </el-form-item>

      <el-form-item prop="plateNum">
        <el-select 
          v-model="fm.ps.plateNum" 
          clearable filterable 
          placeholder="报账车辆"
          style="width: 120px">
          <el-option 
            v-for="item in carNumList" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select 
          v-model="fm.ps.driver" 
          clearable filterable 
          placeholder="报账驾驶员"
          style="width: 120px">
          <el-option 
            v-for="item in serviceManList"
            :key="item.baseUserId.uname"
            :label="item.baseUserId.realName"
            :value="item.baseUserId.uname"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="isMoney">
        <el-input 
          style="width: 180px" 
          placeholder="当前车辆公里数" 
          v-model="fm.ps.operMark" 
        />
      </el-form-item>

      <el-button 
        v-if="!isMoney"
        type="primary" 
        icon="el-icon-search" 
        @click="handleSearch">
        查询
      </el-button>
    </el-form>
  </div>
</template>

<script>
import {getAllPlateNum} from "@/api/services/logistics.service";
import {getStaffCombo} from "@/api/services/common.service";

export default {
  name: "search",
  data() {
    return {
      isMoney: false,
      fm: {
        ps: {
          time: '', // 时间
          startTime: '',
          endTime: '',
          plateNum: '',
          driver: '',
          operMark: ''
        }
      },
      rules: {
        time: [{required: true, message: '请选择时间', trigger: 'blur'}],
        plateNum: [{required: true, message: '请选择车牌号', trigger: 'blur'}],
        driver: [{required: true, message: '请选择驾驶员', trigger: 'blur'}],
        operMark: [
          {required: true, message: '请输入公里数', trigger: 'blur'},
          this.$rules.isPosInt('公里数必须大于0')
        ],
      },
      carNumList: [], // 车牌号
      serviceManList: [], // 经办人
    }
  },
  created() {
    this.init();
  },
  methods: {
    setMoneyType(type = false) {
      this.isMoney = type;
    },
    init() {
      // 车牌号
      getAllPlateNum({status: 0}).then(res => {
        this.carNumList = Object.keys(res.plateNums).map((item) => ({
          label: item,
          value: item,
        }));
      });

      // 员工下拉(经办人)
      getStaffCombo({staffState: "NORMAL,TRY"}).then((res) => {
        this.serviceManList = res.data || [];
      });
    },

    handleSearch() {
      this.$refs.searchRef.validate((valid) => {
        if (valid) {
          const {time, plateNum, driver, operMark} = this.fm.ps
          let params = {
            startTime: '',
            endTime: '',
            plateNum,
            driver,
            operMark
          }
          params.startTime = time ? `${time} 00:00:00` : '';
          params.endTime = time ? `${time} 23:59:59` : '';
          this.$emit('change', params)
        }
      })
    },

    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.searchRef.validate((valid) => {
          resolve(valid)
        })
      })
    },

    getSearchData() {
      const {time, plateNum, driver, operMark} = this.fm.ps
      let params = {
        startTime: '',
        endTime: '',
        plateNum,
        driver,
        operMark
      }
      params.startTime = time ? `${time} 00:00:00` : '';
      params.endTime = time ? `${time} 23:59:59` : '';
      params.timeType = 1;
      return params
    },
    resetFields() {
      this.$refs.searchRef.clearValidate()
    }
  }
}
</script>

<style scoped>

</style>